<!-- ElInputTagString.vue -->
<template>
  <el-input-tag
    v-model="tagList"
    :limit="limit"
    :placeholder="placeholder"
  />
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  limit: {
    type: Number,
    default: 0
  },
  placeholder: {
    type: String,
    default: '请输入标签，回车分隔'
  }
});

const emit = defineEmits(['update:modelValue']);

const tagList = computed({
  get() {
    return props.modelValue
      ? props.modelValue
        .split(',')
        .map(t => t.trim())
        .filter(t => t)
      : [];
  },
  set(value) {
    const tagsString = value.join(',');
    emit('update:modelValue', tagsString);
  }
});
</script>
